<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>短租自驾</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <style>
        #qb {
            width: 700px;
            height: 400px;
            padding-top: 100px;
            padding-left: 170px;
            margin-left: 300px;
            margin-top: 70px;
            border: #3300FF solid 2px;
            border-radius: 7px;
        }
    </style>
</head>
<body>
<div class="layui-tab-content" style="height: 100px;">
    <div class="content" id="content">
        <iframe name="myframe" width="100%" height="600px" frameborder="0"></iframe>
    </div>
</div>
<div id="qb">
    <form class="layui-form" id="form1" onsubmit="return false">
        <div class="layui-form-item">
            <label class="layui-form-label">租车地点:</label>
            <div class="layui-input-inline">
                <select name="quiz1" id="quiz1" lay-filter="quiz1">
                    <option value="0" selected="" disabled="">请选择市</option>
                    <option value=""></option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="quiz2" id="quiz2">
                    <option value="0" selected="" disabled="">请选择县/区</option>
                    <option value=""></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">还车地点:</label>
            <div class="layui-input-inline">
                <select name="quiz3" id="quiz3" lay-filter="quiz3">
                    <option value="0" selected="" disabled="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="quiz4" id="quiz4">
                    <option value="0" selected="" disabled="">请选择县/区</option>
                    <option value=""></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            </div>
        </div>
    </form>
</div>
<script src="../layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit;

        /* 市级下拉框的动态添加 */
        city1();
        /* 租车地点的区级下拉框的动态添加 */
        form.on('select(quiz1)', function (data) {
            layui.$.ajax({              // 使用layui模块化加载
                url: "/carCourier/city/select.do?pid=" + data.value,
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    $("#quiz2").empty();  // 清空下拉框的值
                    $.each(data.info, function (index, item) {
                        $('#quiz2').append(new Option(item.name, item.id));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");//重新渲染 固定写法
                }
            });
        })

        /* 还车地点的区级下拉框的动态添加 */
        form.on('select(quiz3)', function (data) {
            layui.$.ajax({              // 使用layui模块化加载
                url: "/carCourier/city/select.do?pid=" + data.value,
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    $("#quiz4").empty();//清空下拉框的值
                    $.each(data.info, function (index, item) {
                        $('#quiz4').append(new Option(item.name, item.id));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");//重新渲染 固定写法
                }
            });
        })
        //监听提交
        form.on('submit(demo1)', function (data) {
            console.log(data.field)
            layui.$.ajax({
                type: 'post',
                url: '/carCourier/city/button.do',
                data: $("#form1").serialize(),
                dataType: 'json',
                success: function (data) {
                    if(data.code==1){
                        window.location.href = "shortsort.html"
                    }else{
                        alert(data.info)
                    }

                }
            })
            /* layer.alert(JSON.stringify(data.field), {
                 title: '最终的提交信息'
             });*/
            return false;
        });
    });


    function city1() {
        $.ajax({ // 使用layui模块化加载
            url: "/carCourier/city/select.do",
            type: 'get',
            dataType: 'json',
            success: function (data) {
                /* index 是要遍历的下标
                *  item 是对应下标的对象 */
                $.each(data.info, function (index, item) {
                    $('#quiz1').append(new Option(item.name, item.id));// 下拉菜单里添加元素
                    $('#quiz3').append(new Option(item.name, item.id));// 下拉菜单里添加元素
                });
                layui.form.render("select");//重新渲染 固定写法
            },
        });
    }

</script>

</body>
</html>